<template>
  <div class="SystemMessage">
    <template v-if="bizType">
      <div v-if="bizType == 'recallMessage'" class="text-container">
        <span>{{$t('im.imChat.components.messageBox.chattingRecords.components.systemMessage.des1')}}</span>
        <span class="link-primary" v-if="showReEdit" @click="reEdit"
          >{{$t('im.imChat.components.messageBox.chattingRecords.components.systemMessage.des2')}}</span
        >
      </div>
    </template>
    <template v-else>
      <div class="text-container">{{ item.messageContent.msg }}</div>
    </template>
  </div>
</template>

<script>
/** vue */
import EventBus from '@src/util/eventBus';
export default {
  name: 'system-message',
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {};
  },
  computed: {
    bizType() {
      // 特殊类型的系统消息
      return this.item?.messageContent?.bizType;
    },
    reMessageType() {
      // 撤回的消息类型
      return this.item?.messageContent?.bizContent?.messageType;
    },
    showReEdit() {
      // 是否显示重新编辑
      return ['txt', 'paragraph'].includes(this.reMessageType);
    },
  },
  methods: {
    reEdit() {
      let msg = '';
      if (this.reMessageType == 'txt') {
        msg = this.item?.messageContent?.bizContent?.messageContent?.msg ?? '';
      } else if (this.reMessageType == 'paragraph') {
        msg =
          this.item?.messageContent?.bizContent?.messageContent?.customExts
            ?.msg ?? '';
      }
      EventBus.$emit('setHtml', msg);
    },
  },
};
</script>

<style scoped lang='scss'>
.SystemMessage {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #bfbfbf;
  position: relative;

  .text-container {
    padding: 0 10px;
    background: #ffffff;
    position: absolute;
    z-index: 2;
    font-size: 12px;

    .link-primary {
      color: var(--bbx-color-primary, $color-primary-light-6);
      cursor: pointer;
    }
  }

  &::after {
    content: '';
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 0.5px;
    background: #f2f2f2f2;
  }
}
</style>